<template>
  <div class="selected-playlists">
    <MusicNav/>

    <div class="playlist-container">

      <!-- 左侧导航 -->
      <div class="left-nav">
        <ul class="nav-list">
          <li 
            v-for="nav in navItems" 
            :key="nav.type"
            :class="['nav-item', { active: currentType === nav.type }]"
            @click="currentType = nav.type"
          >
            {{ nav.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧内容列表 -->
      <div class="content-list">
        <!-- 音乐项目 -->
        <div class="music-item" v-for="(item, index) in currentList" :key="index">
          <div class="music-cover">
            <img :src="item.cover" :alt="item.title">
          </div>
          <div class="music-info">
            <h3 class="title">{{ item.title }}</h3>
            <p class="description">{{ item.description }}</p>
            <p class="author">制作人：{{ item.author }}</p>
            <div class="action-buttons">
              <button class="play-btn">
                <i class="fas fa-play-circle"></i>
                播放全部
              </button>
              <button class="share-btn">
                <i class="fas fa-share-alt"></i>
                分享
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <FooterNotice/>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

import FooterNotice from '@/components/footer-notice.vue'
import MusicNav from '@/components/music-nav.vue'

// 导航项配置
const navItems = [
  { name: '推荐', type: 'all' },
  { name: '最热', type: 'hot' },
  { name: '热藏', type: 'favorite' },
  { name: '飙升', type: 'rising' }
]

// 当前选中的类型
const currentType = ref('all')

// 所有分类的数据
const musicData = {
  hot: [
    {
      cover: 'https://imgessl.kugou.com/custom/150/20201207/20201207134716994336.jpg',
      title: '乡村之旅：安静恬息·与自然同在',
      description: '清晨的混土芳香扑面来，深呼大自然的气息。安静的欢愉在翠树木扶疏后新生，尽情享受这美妙的春光。#年终预定奖',
      author: '秦苒'
    },
    {
      cover: 'https://p3fx.kgimg.com/soft/collection/150/20210813/20210813110609255220.jpg',
      title: '披荆斩棘的哥哥 合辑',
      description: '滚烫人生，披荆斩棘',
      author: '胖汪追综'
    }
  ],
  favorite: [
    {
      cover: 'https://p3fx.kgimg.com/soft/collection/150/20210912/20210912000735358694.jpg',
      title: '丹心赋：望九州风月，祈万世长安',
      description: '一片丹心御家园，望九州风月，祈万世长安。重范已陨落，风骨已寒凉，这整华德国，终会如愿偿。',
      author: '国风新语'
    },
    {
      cover: 'https://p3fx.kgimg.com/soft/collection/150/20210914/20210914141726699353.jpg',
      title: '巅峰ing-TA们创造着欧美乐坛新年篇',
      description: '如果经常听欧美的的"童鞋"，播放列表里得有多少少会存在它的比伯、泰勒、碧莉，看和这样大牌欧美明星的单曲，但是！你知道有关于他们之前的故事吗？那就让我们开启那些"不为人知"的故事吧！',
      author: '欧美KU乐'
    }
  ],
  rising: [
    {
      cover: 'https://p3fx.kgimg.com/soft/collection/150/20210915/20210915141726699353.jpg',
      title: '【飙升榜】最新流行音乐精选',
      description: '实时更新的音乐飙升榜单，收录当下最热门的音乐作品。',
      author: '音乐排行榜'
    },
    {
      cover: 'https://p3fx.kgimg.com/soft/collection/150/20210916/20210916141726699353.jpg',
      title: '新歌飙升榜单',
      description: '收录最新上线的优质音乐作品，展现音乐的无限魅力。',
      author: '新歌推荐官'
    }
  ]
}

// 根据当前选中类型显示对应的列表
const currentList = computed(() => {
  if (currentType.value === 'all') {
    // 当选择"推荐"时，合并所有分类的数据
    return Object.values(musicData).flat()
  }
  return musicData[currentType.value] || []
})
</script>

<style scoped>
.playlist-container {
  display: flex;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.left-nav {
  width: 200px;
  background-color: #fff;
  padding: 20px 0;
  border-right: 1px solid #eee;
}


.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  padding: 12px 20px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.content-list {
  flex: 1;
  padding: 20px;
  padding-bottom: 100px;
}

.music-item {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #eee;
  gap: 20px;
}

.music-cover {
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-info {
  flex: 1;
}

.title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
}

.description {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.author {
  margin: 0 0 10px 0;
  color: #999;
  font-size: 12px;
  text-align: right;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.play-btn, .share-btn {
  padding: 6px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.play-btn i, .share-btn i {
  font-size: 14px;
}

.play-btn {
  background-color: #2196f3;
  color: #f5f5f5;
}

.share-btn {
  background-color: #2196f3;
  color: #f5f5f5;
}

.play-btn:hover, .share-btn:hover {
  opacity: 0.9;
}

/* 添加选中状态的样式 */
.nav-item.active {
  color: #2d8cf0;
  background-color: #e3f2fd;
  font-weight: bold;
}
</style>